<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>WebSocket Client Monitor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="client_monitor.css">
</head>
<body>
    <div id="client-list">
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <h2>Connected Clients</h2>
            <div class="connection-status">
                <div class="status-light"></div>
            </div>
            <button id="refresh-clients" style="padding: 5px 10px; cursor: pointer;">
                <i class="fa-solid fa-rotate"></i> 刷新
            </button>
            <button onclick="window.location.href='file_manager.html'" style="padding: 5px 10px; cursor: pointer; margin-left: 10px;">
                <i class="fa-solid fa-folder"></i> 文件管理
            </button>
        </div>
    </div>
    <div id="file-view">
        <h2>File Tree</h2>
        <div id="file-tree-container"></div>
    </div>

    <script src="client_monitor.js"></script>
    <div id="upload-progress-box" class="upload-progress-box">
        <div class="progress-box-header">
            <span>文件上传进度</span>
        </div>
        <div class="progress-box-content">
            <div id="progress-list" class="progress-list"></div>
        </div>
    </div>
</body>
</html>
